import React from 'react';
import Toast from '..';
import DemoBlock from '../../../site/components/DemoBlock';
import useDemoTranslate from '../../../site/hooks/use-demo-translate';
import Cell from '../../cell';
import Icon from '../../icon';
import { Dictionary } from '../../utils/interface';
import { createBEM } from '../../utils/namespace';
import './basic.less';

const bem = createBEM('demo-toast');

const I18N: Dictionary<Dictionary<string>> = {
	'zh-CN': {
		basicUsage: '基础用法',
		fail: '失败提示',
		text: '提示内容',
		text2: '成功文案',
		text3: '失败文案',
		text4: '倒计时 ${second} 秒',
		title1: '文字提示',
		title2: '加载提示',
		title3: '成功/失败提示',
		success: '成功提示',
		customIcon: '自定义图标',
		customImage: '自定义图片',
		loadingType: '自定义加载图标',
		positionTop: '顶部展示',
		updateMessage: '动态更新提示',
		positionBottom: '底部展示',
		customPosition: '自定义位置',
	},
	'en-US': {
		basicUsage: 'Basic Usage',
		fail: 'Fail',
		text: 'Some messages',
		text2: 'Success',
		text3: 'Fail',
		text4: '${second} seconds',
		title1: 'Text',
		title2: 'Loading',
		title3: 'Success/Fail',
		success: 'Success',
		customIcon: 'Custom Icon',
		customImage: 'Custom Image',
		loadingType: 'Loading Type',
		positionTop: 'Top',
		updateMessage: 'Update Message',
		positionBottom: 'Bottom',
		customPosition: 'Custom Position',
	},
};

export default function Basic(): ReturnType<React.FC> {
	const [i18n] = useDemoTranslate(I18N, 'en-US');

	return (
		<>
			<DemoBlock cardMode title={i18n.basicUsage}>
				<Cell
					title={i18n.title1}
					clickable
					rightIcon={<Icon name="arrow-right" />}
					onClick={() =>
						Toast.show({ message: i18n.text, duration: 0 })
					}
				/>
			</DemoBlock>
		</>
	);
}
